$(document).ready(function () {
  const $countryUl = $('#countryList')
  const $retailerUl = $('#retailerList')

  // 国家
  const countries = DropdownOptions.CountryListSelect || []
  // 零售商
  const retailers = DropdownOptions.RetailerOptions || []

  // 渲染函数
  function renderOptions ($ul, options) {
    $ul.empty()
    options.forEach(opt => {
      $ul.append(`<li data-value="${opt.value}">${opt.label}</li>`)
    })
  }

  // 只把各自的数据渲染到各自的 UL
  renderOptions($countryUl, countries)
  renderOptions($retailerUl, retailers)

  // 打开/关闭当前下拉（并关闭其它）
  $('.select-dropdown').on('click', function (e) {
    e.stopPropagation()
    $('.select-dropdown').not(this).removeClass('open')
    $(this).toggleClass('open')
  })
  $(document).on('click', () => $('.select-dropdown').removeClass('open'))

  // 选择国家
  $countryUl.on('click', 'li', function (e) {
    e.stopPropagation()
    const $dd = $(this).closest('.select-dropdown') // 当前这个下拉
    const value = $(this).data('value')
    const label = $(this).text()
    $('#country').val(value).trigger('change') // 写入国家 hidden
    $dd.find('p').text(label) // 只改当前下拉的文本
    $('#country').siblings('.error-message').removeClass('show')
    $dd.removeClass('open')
  })

  // 选择零售商
  $retailerUl.on('click', 'li', function (e) {
    e.stopPropagation()
    const $dd = $(this).closest('.select-dropdown')
    const value = $(this).data('value')
    const label = $(this).text()
    $('#retailer').val(value).trigger('change') // ✅ 写入零售商 hidden
    $dd.find('p').text(label)
    $('#retailer').siblings('.error-message').removeClass('show')
    $dd.removeClass('open')
  })

  $('.select-dropdown').click(function () {
    var dropdown = $(this)
    var ul = dropdown.children('ul')
    var p = dropdown.find('p')
    var input = dropdown.find('input')
    // 如果为二级下拉
    if (ul.find('ul li').length) {
      var li = ul.find('ul li')
    } else {
      // 一级
      var li = ul.find('li')
    }

    var arrows = dropdown.find('.select-arrows')
    if (ul.css('display') == 'none') {
      ul.slideDown('fast')
      arrows.css('transform', 'rotate(180deg)')
    } else {
      ul.slideUp('fast')
      arrows.css('transform', 'rotate(0)')
    }

    li.click(function () {
      var txt = $(this).text()
      var firstSelect = $(this).parent().prev().text()
      p.html(`${firstSelect} ${txt}`)
      input.val(`${firstSelect} ${txt}`)
      ul.slideUp('fast')
      arrows.css('transform', 'rotate(0)')
      // 如果选中的是 'Other'，则将 select-dropdown 的宽度设置为 50%
      if ($(this).parent().parent().hasClass('selfSelect')) {
        if (txt == 'Other') {
          dropdown.css('width', '50%')
          var itemssss = $(this).parent().parent().parent().find('.abcd')
          itemssss.css('width', '50%')
          // 展示 input
          dropdown.parent().find('.attribute_input').css('display', 'block')
        } else {
          dropdown.css('width', '100%')
          var itemssss = $(this).parent().parent().parent().find('.abcd')
          itemssss.css('width', '0')
          dropdown.parent().find('.attribute_input').css('display', 'none')
          dropdown.parent().find('.attribute_input').val('')
          dropdown.parent().find('.error-message').text('') // 移除错误信息
        }
      }
    })
    dropdown.mouseleave(function () {
      ul.slideUp('fast')
      arrows.css('transform', 'rotate(0)')
    })
  })

  // 点击其他地方关闭下拉
  $(document).click(function () {
    $('.select-dropdown').removeClass('open')
  })

  // 校验字段
  const validationRules = [
    {
      key: 'name',
      required: true,
      maxLength: 50,
      errorMessage: {
        required: 'Please enter your name',
        maxLength: 'The length cannot exceed 50'
      }
    },
    {
      key: 'companyName',
      required: false
    },
    {
      key: 'checkbox',
      required: false
    },
    {
      key: 'email',
      required: true,
      maxLength: 30,
      regex: regEmail,
      errorMessage: {
        required: 'Please enter your email',
        maxLength: 'The length cannot exceed 30',
        regex: 'Please enter a valid email'
      }
    },
    {
      key: 'country',
      required: true,
      errorMessage: {
        required: 'Please Select your Country'
      }
    },
    {
      key: 'retailer',
      required: true,
      errorMessage: {
        required: 'Please Select your Retailer'
      }
    },
    {
      key: 'phone',
      required: true,
      regex: regPhone,
      errorMessage: {
        required: 'Please enter your Phone',
        regex: 'Please enter a valid phone number'
      }
    }
  ]

  // 校验函数
  function validateField (rule) {
    const $input = $(`#${rule.key}`)
    const $error = $input.siblings('.error-message')
    const value = $input.val().trim()

    // 必填校验
    if (rule.required && !value) {
      $error.text(rule.errorMessage.required).addClass('show')
      return false
    }

    // 最大长度校验
    if (rule?.maxLength && value.length > rule.maxLength) {
      $error.text(rule.errorMessage.maxLength).addClass('show')
      return false
    }

    // 正则校验
    if (rule?.regex && value && !rule?.regex.test(value)) {
      $error.text(rule.errorMessage.regex).addClass('show')
      return false
    }

    // 校验通过
    $error.removeClass('show')
    return true
  }

  function getFormValues () {
    let allValid = true
    const formValues = {}

    validationRules.forEach(rule => {
      const $el = $("input[name='" + rule.key + "']")

      let value = ''
      if ($el.length) {
        if ($el.attr('type') === 'hidden') {
          value = $el.val() || ''
        } else {
          value = ($el.val() || '').trim()
        }
      }
      formValues[rule.key] = value
      // 校验必填或有校验规则的字段
      if (rule.required || rule.regex) {
        if (!validateField(rule)) {
          allValid = false
        }
      }
    })
    return allValid ? formValues : null
  }

  // 根据文件名获取 SVG
  function getFileIcon (filename) {
    const ext = filename.split('.').pop().toLowerCase()
    for (let item of ENUM_FILE_TYPE) {
      if (Array.isArray(item.label)) {
        if (item.label.includes(ext)) return item.svgIcon
      } else if (item.label === ext) {
        return item.svgIcon
      }
    }
    // 默认图标
    return `../../img/PC/doc_pc.png`
  }

  const $fileInput = $('#uploadInput')
  const $uploadBtn = $('#handleUploadFile')
  const $fileContent = $('.file-content')
  let uploadedFiles = [] // 存储已上传的文件
  // 点击按钮触发文件选择
  $uploadBtn.on('click', function () {
    $fileInput.click()
  })

  // 文件选择后处理
  $fileInput.on('change', function (e) {
    const files = e.target.files
    if (!files || files.length === 0) return
    // 将文件添加到缓存数组
    uploadedFiles = uploadedFiles.concat(Array.from(files))

    // 遍历文件
    Array.from(files).forEach(file => {
      // 上传成功后显示到页面（模拟）
      const svgIcon = getFileIcon(file.name)
      const formData = new FormData()
      formData.append('file', file)

      // 模拟上传，可替换成你的接口
      // 这里用 setTimeout 模拟异步上传
      setTimeout(() => {
        // 上传成功后显示到页面
        const fileHtml = `
      <div class="file-info">
        <div class="file-left-txt">
            <img src="${svgIcon}" alt="">
          <div class="file-name">${file.name}</div>
        </div>
        <img style="width:2rem;height:2rem;" src="../img/PC/scusser_pc.png" alt="">
      </div>
    `
        $fileContent.append(fileHtml)
      }, 500)
    })

    // 重置 input，防止选择同一个文件不触发 change
    $fileInput.val('')
  })

  // 提交
  $('#handleSendBtn').click(function () {
    const formValues = getFormValues()
    if (!formValues) return
    // console.log(formValues)
    //  文件
    console.log(uploadedFiles)
  })

  // 绑定事件的函数示例

  let mayFavorite = [
    {
      id: 1,
      img: '../../img/PC/diamond.png',
      title: 'CB4044 Cup Shape Vitrified Bond Diamond Grinding Wheel',
      desc: 'Ideal Cut, DColor, VVS2 Clarity',
      code: '&5127A',
      unit: 'Ct',
      sum: '239'
    },
    {
      id: 2,
      img: '../../img/PC/diamond.png',
      title: 'CB4044 Cup Shape Vitrified Bond Diamond Grinding Wheel',
      desc: 'Ideal Cut, DColor, VVS2 Clarity',
      code: '12715127A',
      unit: 'kg',
      sum: '239'
    },
    {
      id: 3,
      img: '../../img/PC/diamond.png',
      title: 'CB4044 Cup Shape Vitrified Bond Diamond Grinding Wheel',
      desc: 'Ideal Cut, DColor, VVS2 Clarity',
      code: '12715127A',
      unit: 'kg',
      sum: '239'
    }
  ]
  // 存数据
  LocalStore.set("inquiryList", mayFavorite)

  // 4. 添加到页面
  const $container = $('#inquiry-list-content-info')
  const $listContent = $('.list-body-content')
  const notDataHtml = `<div class="no-inquiry-content">
  <p>Your inquiry list is empty.</p>
  <button class="btn-back-home" type="button">Go home</button>
</div>`
  if (LocalStore.get("inquiryList").length == 0) {
    $container.append(notDataHtml)
  } else {
    LocalStore.get("inquiryList").forEach(item => {
      const mayFavoriteHtml = `<div class="list-body-content" data-id="${item.id}">
      <!-- 左边图片 -->
      <div class="list-body-left">
         <img src="${item.img}" alt="${item.title}" class="favorite-img" />
      </div>
      <!-- 右边内容区域 -->
      <div class="list-body-right">
        <div class="body-right-info">
          <div class="right-info-content">
            <div class="info-medium-title">${item.title}</div>
            <div class="info-describe-content">
              <p class="info-describe">${item.desc}</p>
              <p class="info-order-code">
               ${item.code}
              </p>
            </div>
            <div class="info-count-content">
              <!-- 开关 -->
              <div class="info-switch">
                <!-- 左边单位文字 -->
                <span class="unit-label">kg</span>
                <!-- 开关 -->
                <label class="switch">
                  <input type="checkbox" id="unitToggle"   ${item.unit === 'Ct' ? 'checked' : ''
        }   />
                  <span class="slider"></span>
                </label>
                <!-- 右边单位文字 -->
                <span class="unit-label">Ct</span>
              </div>
              <!-- 数量选择 -->
              <div class="quantity-box">
                <button class="qty-btn" id="decrease">-</button>
                <div class="input-width">
                  <input min="0" max="1000" type="text" id="quantity" value="${item.sum
        }"  />
                  <span class="qty-unit">${item.unit}</span>
                </div>
                <button class="qty-btn" id="increase">+</button>
              </div>
            </div>

          </div>
          <div class="right-info-operate" id="remove-inquiry">
            <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M7.125 6.5L12 11.375L10.875 12.5L6 7.625L1.125 12.5L0 11.375L4.875 6.5L0 1.625L1.125 0.5L6 5.375L10.875 0.5L12 1.625L7.125 6.5Z"
                fill="#B0B0B0" />
            </svg>
            <span class="info-operate-text">Remove</span>
          </div>
        </div>
      </div>
    </div>`

      $container.append(mayFavoriteHtml)
    })
    // 5. 绑定事件（开关、加减按钮等）
    bindEvents() // 自定义函数
  }

  function bindEvents () {
    // 事件委托
    $('#inquiry-list-content-info').on(
      'change',
      '.list-body-content input[type="checkbox"]',
      function () {
        const $container = $(this).closest('.list-body-content') // 找到当前组件的容器
        const $qtyUnit = $container.find('.qty-unit')
        const $switchWrapper = $container.find('.info-switch')
        // 读取当前开关状态
        const leftUnit = $switchWrapper
          .find('.unit-label')
          .first()
          .text()
          .trim()
        const rightUnit = $switchWrapper
          .find('.unit-label')
          .last()
          .text()
          .trim()

        $qtyUnit.text($(this).is(':checked') ? rightUnit : leftUnit)
      }
    )

    // 数字加事件
    $('#inquiry-list-content-info').on('click', '#increase', function () {
      const $container = $(this).closest('.list-body-content')
      const $input = $container.find('#quantity')
      //  最大1000
      let val = parseInt($input.val()) || 0
      if (val >= 1000) {
        $input.val(1000)
      } else {
        $input.val(val + 1)
      }
    })
    // 数字减去事件
    $('#inquiry-list-content-info').on('click', '#decrease', function () {
      const $container = $(this).closest('.list-body-content')
      const $input = $container.find('#quantity')
      let val = parseInt($input.val()) || 0
      if (val <= 0) {
        $input.val(0)
      } else {
        $input.val(val - 1)
      }
    })

    // 监听数字输入框的失焦事件(输入完成）
    $('#inquiry-list-content-info').on('blur', '#quantity', function () {
      let val = parseInt($(this).val(), 10) || 0; // 转换为整数，非数字时归零
      // 超过 1000 则归 1000
      // 小于 0 则归 0
      if (val > 1000) {
        $(this).val(1000)
      } else if (val < 0) {
        $(this).val(0)
      }
    })

    // 监听移除事件
    $('#inquiry-list-content-info').on('click', '#remove-inquiry', function () {
      const $container = $('#inquiry-list-content-info'); // 父级列表容器
      const $item = $(this).closest('.list-body-content'); // 当前被删除的行
      // 移除当前行
      $item.remove();

      // 移除数据（根据 ID 删除）
      LocalStore.removeItem("inquiryList", item => item.id === $item.data('id'));


      // 如果 inquiryList 为空，则显示没有数据
      if (LocalStore.get("inquiryList").length === 0) {
        $container.append(notDataHtml);
      }
    })
  }
})
